{% extends "base.html" %}

{% block head %}
	<script language="javascript" type="text/javascript" src="/media/javascript/jquery-1.7.2.js" ></script>
    <script language="javascript" type="text/javascript" src="/media/javascript/jquery-1.7.2.js"></script>
    <script language="javascript" type="text/javascript" src="/media/javascript/flot/jquery.flot.js"></script>    	
    <script language="javascript" type="text/javascript" src="/media/javascript/flot/jquery.flot.stack.js"></script>    	
    <script language="javascript" type="text/javascript" src="/media/javascript/flot/jquery.flot.pie.js"></script>
	<script id="source" language="javascript" type="text/javascript">
	$(function () {
		
		{% autoescape off %}
			var input_queue_data = {{ input_data }};
			var output_queue_data = {{ output_data }};
			var incoming_smtp_data = {{ incoming_smtp_data }};
			var outgoing_smtp_data = {{ outgoing_smtp_data }};
			var msgs_fwd = {{ msgs_fwd }}
        	var msgs_sent = {{ msgs_sent }}	
        	var msgs_in_quarantine = {{ msgs_in_quarantine }}
        	var msgs_deleted = {{ msgs_deleted }}
		{% endautoescape %}
		
		var time_column_width = 2500
		for (var i = 0; i < output_queue_data.length; ++i)
			output_queue_data[i][0] += time_column_width;
			            
	    $.plot($("#queue_chart"), 
	    	[{
	    		label: "Kolejka wejściowa",
				data: input_queue_data,
			}, {
	    		label: "Kolejka wyjściowa",
				data: output_queue_data,
			}], 
		    {
			    series: { 
	    	        bars: { show: true, barWidth: time_column_width },
			    },
				yaxis: { label:"ilość", minTickSize: 1, tickDecimals: 0 },
				xaxis: { mode: "time", timeformat: "%H:%M:%S", minTickSize: [1, "second"] },
				legend: { container: $("#queue_chart_legend") },
			}
		);		
		
	    $.plot($("#smtp_chart"), 
	    	[{
	    		label: "Połączenia z klientami",
				data: incoming_smtp_data,
			}, {
	    		label: "Połączenia z serwerami",
				data: outgoing_smtp_data,
			}], 
		    {
			    series: { 
			    	lines: { show: true }
			    },
				yaxis: { label:"ilość", minTickSize: 1, tickDecimals: 0 },
				xaxis: { mode: "time", timeformat: "%H:%M:%S	", minTickSize: [1, "second"] },
				legend: { container: $("#smtp_chart_legend") },
			}
		);		
		
		var stat_data = [
	    		[msgs_sent, 1],
	    		[msgs_fwd, 2],
				[msgs_in_quarantine, 3],
	    		[msgs_deleted, 4]
	    	];
	    	
		$.plot($("#stat_chart"), [ { data: stat_data } ], {
		        series: {
	    	        bars: { show: true, barWidth: 0.6, align:'center', horizontal: true },
	    	    },
				xaxis: { label:"ilość", minTickSize: 1, tickDecimals: 0 },
	    	    yaxis: { 
	    	    	position: "right",
	    	    	ticks:[[1,'Przesłane do adresata'],[2,'Przekierowane'],[3,'W kwarantannie'],[4,'Usunięte']],
	    	    },
			}
		);
		
		$.plot($("#pie_stat_chart"), [{
	    		label: "W kwarantannie",
				data: msgs_in_quarantine,
			}, {
	    		label: "Przekierowane",
				data: msgs_fwd,
			}, {
	    		label: "Usunięte",
				data: msgs_deleted,
			}, {
	    		label: "Przesłane do adresata",
				data: msgs_sent,
			}],
			{
		        series: 
		        {
		            pie: 
		            {  
		            	show: true,
		                radius: 1,
		                label: 
		                {
		                    show: true,
		                    radius: 1/2,
		                    formatter: function(label, series)
		                    {
		                        return '<div style="text-align:center;color:white;">'+label+'<br/>'+Math.round(series.percent)+'%</div>';
		                    },
		                    threshold: 0.1
		                }
		            }
		        },
		        legend: { show: false },
			}
		);
			
	});
	
	</script>
        
{% endblock %}

{% block bodyEvent %}
{% endblock bodyEvent %}

{% block title %}
	Status systemu
{% endblock title %}

{% block subtitle %}
	Monitoring bieżącego stanu systemu.
{% endblock subtitle %}

{% block content %}

	<!-- % if user.is_authenticated == False %
		Aby móc przeglądać zasoby tej stony, musisz się zalogować!
	% endif % -->		
		
	{% if msgs_from_system_start == 0 %}
		Od startu systemu nie nadeszła jeszcze żadna wiadomość.
	{% else %}
	
		<h2>Statystyka wiadomości.</h2>
		<div id="stat_chart" class="chart_placeholder"></div>
		
		<h2>Ilość wiadomości w kolejkach: wejściowej i wyjściowej.</h2>
		<div id="queue_chart" class="chart_placeholder"></div>
		<div id="queue_chart_legend" class="chart_placeholder_legend"></div>
		
		<h2>Połączenia SMTP.</h2>
		<div id="smtp_chart" class="chart_placeholder"></div>
		<div id="smtp_chart_legend" class="chart_placeholder_legend"></div>
				
	{% endif %}

{% endblock content %}

{% block help %}
	{% if msgs_from_system_start > 0 %}
		<h2>Statystyka wiadomości.</h2>
		<p class="border">
		Od początku działania systemu przeszło przez niego <b>{{ msgs_from_system_start }}</b> wiadomości. <br/>
		</p>
		<p class="border">
			<div id="pie_stat_chart" class="help_panel_chart_placeholder"></div>
		</p>
	{% endif %}
{% endblock help %}
